<template>
    <div>
        <div style="height: 800px; width: 800px;" ref="containerRef">324</div>
        <TeleportContainer />
        <div>
            <el-button @click="test">测试函数</el-button>
            <el-button @click="testAddEdges">测试函数</el-button>
            <TestCommponent />
        </div>
    </div>
</template>
<script lang="ts" setup name="SanBox">
import { ref, onMounted, reactive } from 'vue';
import { Graph, Node, Path, Edge, Platform, StringExt, Shape } from '@antv/x6'
import { Selection } from '@antv/x6-plugin-selection'
import classnames from 'classnames'
import { Snapline } from '@antv/x6-plugin-snapline'
import insertCss from 'insert-css'
import { getTeleport, register } from '@antv/x6-vue-shape'
import ProgressNode from '../ProgressNode.vue'
import data from './Data';
import { VueToolItem } from './CustomButtonTool';
import { getDownstreamNodePosition } from './tools';
import TestCommponent from './TestCommponent.vue';


Shape.HTML.register({
    shape: 'custom-html-node',
    width: 80,
    height: 80,
    effect: ['data'],
    html() {
        const div = document.createElement('div')
        div.className = 'custom-html'
        return div
    },
})

Graph.registerEdgeTool('vue-tool', VueToolItem, true)

register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    component: ProgressNode,
    ports: {
        groups: {
            top: {
                position: 'top',
                attrs: {
                    circle: {
                        magnet: true,
                        stroke: '#8f8f8f',
                        r: 5,
                    },
                },
            },
            right: {
                position: 'right',
                attrs: {
                    circle: {
                        magnet: true,
                        stroke: '#8f8f8f',
                        r: 5,
                    },
                },
            },
            left: {
                position: 'left',
                attrs: {
                    circle: {
                        magnet: true,
                        stroke: '#8f8f8f',
                        r: 5,
                    },
                },
            },
            bottom: {
                position: 'bottom',
                attrs: {
                    circle: {
                        magnet: true,
                        stroke: '#8f8f8f',
                        r: 5,
                    },
                },
            },
        },
    },
})

function test() {
    console.log('测试函数')
    if (graph.value) {
        // 获取所有节点
        const nodes = graph.value.getNodes()
        // 获取所有边
        const edges = graph.value.getEdges()
        console.log('==> node1', nodes![1].size())
        console.log('所有节点:', nodes)
        console.log('所有边:', edges)
    }
}

function testAddEdges() {
    console.log('测试函数')
    if (graph.value) {
        graph.value.addEdge({
            source: {
                cell: 'node1',
                port: 'right',
            },
            target: {
                cell: 'node2',
                port: 'left',
            },
            vertices: [
                { x: 40, y: 200 },
                { x: 200, y: 200 },
                { x: 200, y: 160 },
            ],
            connector: 'smooth',
            attrs: {
                line: {
                    stroke: '#8f8f8f',
                    strokeWidth: 1,
                    targetMarker: 'classic',
                },
            },
        })
    }
}

const containerRef = ref<HTMLDivElement | null>(null)

const TeleportContainer = getTeleport()


const graph = ref<Graph>();
onMounted(() => {
    graph.value = new Graph({
        container: containerRef.value as any,
        background: {
            color: '#F2F7FA',
        },
        // autoResize: true,
    })
    graph.value.use(
        new Snapline({
            enabled: true,
        })
    )
    graph.value.fromJSON(data)
})


</script>
<style>
.custom-html {
    background-color: #bfa;
    width: 80px;
    height: 80px;
}

.vue-tool-container {
    width: 100px;
    height: 100px;
    background: red;
}
</style>